<template>
  <div class="rightpanel w-full h_full p_relative">
    <el-tooltip
      class="item"
      effect="dark"
      content="自定义排序"
      placement="top-start"
    >
      <svg-icon
        class-name="moreicon c_text commhover"
        icon-class="imore"
        @click="handleOpen"
      />
    </el-tooltip>
    <el-tabs type="border-card">
      <el-tab-pane
        v-for="(item, index) in tabList"
        :key="index"
        :label="item.name"
      >
        <verbal-trick v-if="item.id == 1" :type='item.id' />
        <!-- <group-profile v-else-if="item.id == 2" /> -->
        <verbal-trick v-else-if="item.id == 3" :type='item.id' />
        <user-profile v-else-if="item.id == 4" />
        <!-- <div v-else>{{ item.name }}</div> -->
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      title="自定义排序"
      :visible.sync="open"
      width="480px"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <el-tree
        ref="draggtree"
        :data="treeList"
        :props="defaultProps"
        node-key="id"
        default-expand-all
        @node-drag-start="handleDragStart"
        @node-drop="handleDrop"
        :draggable="true"
        :allow-drop="allowDrop"
        :allow-drag="allowDrag"
        class="dragtree"
      >
        <div class="dragitem flex aligncenter w_full" slot-scope="{ data }">
          <svg-icon class-name="mr-26 draggericon f-12" icon-class="ilist" />
          <div class="role-title c_text f-13">{{ data.name }}</div>
        </div>
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose">取 消</el-button>
        <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import ChatleftHeader from "./components/ChatleftHeader.vue";
import GroupProfile from './components/GroupProfile.vue'
import VerbalTrick from './components/VerbalTrick.vue'
import UserProfile from './components/UserProfile.vue'
export default {
  data() {
    return {
      tabList: [
        { id: 1, name: "企业话术" },
        // { id: 2, name: "群资料" },
        { id: 3, name: "个人话术" },
        { id: 4, name: "客户资料" },
      ],
      open: false,
      defaultProps: {
        children: "children",
        label: "name",
      },
      treeList: [],
    };
  },
  components: {
    ChatleftHeader,
    GroupProfile,
    VerbalTrick,
    UserProfile
  },
  created() {
    console.log("rowitem:", this.rowitem);
    this.getList();
  },
  props: {},
  methods: {
    getList() {
      console.log("获取内容");
    },

    handleOpen() {
      this.treeList = [...this.tabList];
      this.open = true;
    },

    handleClose() {
      this.open = false;
    },

    handleSubmit(){
      this.tabList = [...this.treeList]
      this.handleClose()
    },

    handleDragStart(node, ev) {
      console.log("drag start", node);
      this.draggingNode = node;
    },

    // 拖拽成功完成
    //draggingNode当前正拖拽的节点 dropNode目标节点|参考节点 dropType拖拽到参考节点的哪个位置 ev事件对象
    handleDrop(draggingNode, dropNode, dropType, ev) {
      console.log(draggingNode, dropNode, dropType, ev);
      if (this.draggingNode) {
        // 在此处可以根据业务需求，更新数据源或者调用API进行相应的操作
        console.log("拖放完成！");
        console.log("被拖动的节点：", this.draggingNode);
        console.log("接收拖放的节点：", dropNode);
      }
      this.draggingNode = null;
    },

    // 拖拽时判定目标节点能否被放置
    allowDrop(draggingNode, dropNode, type) {
      // console.log(draggingNode.level, dropNode.level);
      //注掉的是同级拖拽
      if (draggingNode.level === dropNode.level) {
        return type === "prev" || type === "next";
      } else {
        // 不同级进行处理
        return false;
      }
    },

    allowDrag(node) {
      return true;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-tabs--border-card {
  box-shadow: none;
  height: 100%;
  border: 0;
  .el-tabs__item {
    height: 46px;
    line-height: 46px;
  }
}
::v-deep .el-tabs__content{
  height: calc(100% - 46px);
  padding: 0;
}
::v-deep .el-tab-pane{
  height: 100%;
}
.moreicon {
  position: absolute;
  right: 10px;
  top: 14px;
  width: 18px;
  height: 18px;
  z-index: 9;
}
.dragitem {
  height: 40px;
  line-height: 40px;
  background: #f7f7f7;
  border-radius: 4px;
  padding-left: 20px;
}
.draggericon {
  cursor: move;
}
.dragtree {
  ::v-deep .el-tree-node__content {
    height: 40px;
    border-radius: 4px;
    background-color: transparent;
    margin-bottom: 8px;
    &:hover,
    &:visited,
    &:focus,
    &:active {
      background-color: transparent;
    }
  }
  ::v-deep .el-tree-node__expand-icon {
    position: absolute;
  }
}
</style>